<template>
    <el-form :model="form" label-width="120px">
        <el-row :gutter="20" v-for="(row, idx) of columns" :key="idx">
            <el-col :sm="column.colspan ?? (24 / row.length)" v-for="(column, idx2) of row" :key="idx2">
                <el-form-item :label="column.label">
                    <slot :name="column.slot" :row="row" v-if="column.slot">
                        <template v-if="column.render == 'text'">
                            <el-input v-model="form[column.name]" />
                        </template>
                        <template v-else-if="column.render == 'radio'">
                            <el-radio-group v-model="form[column.name]">
                                <el-radio :label="idx3" v-for="(item, idx3) of column.config.dataset" :key="idx3">
                                    {{ item }}
                                </el-radio>
                            </el-radio-group>
                        </template>
                        <template v-else-if="column.render == 'textarea'">
                            <el-input v-model="form[column.name]" :rows="2" type="textarea" placeholder="Please input" />
                        </template>
                    </slot>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="Activity name">
            <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="Activity zone">
            <el-select v-model="form.region" placeholder="please select your zone">
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
            </el-select>
        </el-form-item>
        <el-form-item label="Activity time">
            <el-col :span="11">
                <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
            </el-col>
            <el-col :span="2" class="text-center">
                <span class="text-gray-500">-</span>
            </el-col>
            <el-col :span="11">
                <el-timr-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
            </el-col>
        </el-form-item>
        <el-form-item label="Instant delivery">
            <el-switch v-model="form.delivery" />
        </el-form-item>
        <el-form-item label="Activity type">
            <el-checkbox-group v-model="form.type">
                <el-checkbox label="Online activities" name="type" />
                <el-checkbox label="Promotion activities" name="type" />
                <el-checkbox label="Offline activities" name="type" />
                <el-checkbox label="Simple brand exposure" name="type" />
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="Resources">
            <el-radio-group v-model="form.resource">
                <el-radio label="Sponsor" />
                <el-radio label="Venue" />
            </el-radio-group>
        </el-form-item>
        <el-form-item label="Activity form">
            <el-input v-model="form.desc" type="textarea" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">Create</el-button>
            <el-button>Cancel</el-button>
        </el-form-item>
    </el-form>
</template>
  
<script setup>
import { reactive } from 'vue'

// do not use same name with ref
const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})

const onSubmit = () => {
    console.log('submit!')
}

const columns = [
    [
        { name: 'avatar', label: '头像', render: 'image' },
    ],
    [
        { name: 'photo', label: '照片', render: 'image-upload' },
    ],
    [
        { name: 'username', label: '用户名', render: 'text' },
        { name: 'nickname', label: '昵称', render: 'text' },
    ],
    [
        { name: 'group_id', label: '分组', render: 'select-remote', config: { url: '' } },
        { name: 'gender', label: '性别', render: 'select', config: { dataset: { 1: '男', 2: '女', 3: '未知' } } }
    ],
    [
        { name: 'sumamry', label: '摘要', render: 'textarea' },
    ],
    [
        { name: 'desc', label: '详情', render: 'editor' }
    ],
    [
        { name: 'status', label: '状态', render: 'radio', config: { dataset: { 1: '正常', 2: '禁用' } } }
    ]
]
</script>
  